<template>
	<view class="form-box" :class="currentTheme" :style="{backgroundPosition:`100% ${barHeight}px`}">
		<a-nabbar @getNavHeight="getNavHeight" :name="pageTitle || '快速登录'" :customBack="customBack" :option="option" />
		<view class="welcome" :style="{top:`${barHeight+52}px`}">
			<image
				src="https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/b77aeff3d59a45b6b96cd2e8dddbd8c0.png">
			</image>
		</view>
		<view class="field-box">
			<view class="u-flex u-margin-bottom-80">
				<text class="box-title text-bold u-font-36">手机号：</text>
				<view class="u-flex-1" style="flex-shrink: 0;">
					<u-input v-model="form.phone" :clearable="false" type="number" maxlength="11" :custom-style="{
						background: '#E0E0E0',
						color:'#333',
						height:'78rpx',
						borderRadius:'50px',
						paddingLeft:'32rpx'
					}" placeholderStyle="color:'#333'" placeholder="请填写手机号" :border-bottom="false" :disabled="registerModelFlag || loginModelFlag"/>
				</view>
			</view>
			<view class=" u-flex">
				<text class="box-title text-bold u-font-36">验证码：</text>
				<view class="u-flex-1 u-padding-right-12" style="flex-shrink: 0;">
					<u-input v-model="form.phoneCode" :clearable="false" type="number" :custom-style="{
						background: '#E0E0E0',
						color:'#333',
						height:'78rpx',
						borderRadius:'50px',
						paddingLeft:'32rpx'
					}" placeholderStyle="color:'#333'" placeholder="请填写验证码" :border-bottom="false" :disabled="registerModelFlag || loginModelFlag"/>
				</view>
				<!-- <u-button shape="circle" @click="getCodeVali" hover-class="none" size="mini" :disabled="time>0"
					:custom-style="{backgroundColor:'#765CFE',color:'#765CFE',width:'116rpx',height:'58rpx'}"><text
						class="text-white">{{timeTxt}}</text></u-button> -->
				<view>
					<item-btn width="112" height="78" :bgColor="time<0 ? '#765CFE' : '#433687'" :disabled="time>0" @click="getCodeVali">{{timeTxt}}</item-btn>
				</view>
			</view>
		</view>
		<view class="login-rigister">
			<u-button shape="circle" hover-class="none" @click="loginUser" :loading="loading"
				:custom-style="{background:'#765CFE',width:'580rpx',margin:'aotu'}"><text
					class="text-white">{{pageTitle || '快速登录'}}</text></u-button>
		</view>
		<modal v-model="registerModelFlag" :show-title="false" show-cancel-button cancel-color="#333333"
			content="请允许获取微信授权以便给您带来更好的用户体验">
			<u-button shape="circle" slot="confirm-button" hover-class="none" @click="getUserInfo"
				:custom-style="{backgroundColor:'transparent',color:'transparent',height:'50px'}">
				<text class="text-color-txtTheme">授权</text>
			</u-button>
			<!--@getuserinfo="getUserInfo"  open-type="getUserInfo"   -->
		</modal>
		<modal v-model="loginModelFlag" :show-title="false" show-cancel-button confirm-text="去登录" @confirm="login"
			cancel-color="#333333" :confirm-color="currentThemeObj.primary" content="注册成功,是否直接登录？" />
	</view>
</template>

<script>
	import time from './validateCodeTime.js'
	import modal from '@/components/u-modal/u-modal.vue'
	import loginMixins from './login.js'
	import {
		exhibitRegister
	} from '@/api/user.js'
	import {
		getDetail,
		add
	} from '@/api/crud.js'
	export default {
		mixins: [time, loginMixins],
		components: {
			modal
		},
		data() {
			return {
				form: {
					phone: '',
					phoneCode: ''
				},
				registerModelFlag: false,
				loginModelFlag: false,
				option: {},
				loading: false,
				barHeight: 0
			};
		},
		computed: {
			pageTitle() {
				return {
					login: '快速登录',
					editPhone: '换绑手机',
					register: '快速注册'
				} [this.option.type]
			},
			pageType() {
				return {
					login: 1,
					editPhone: 3,
					register: 2
				} [this.option.type]
			}
		},
		onLoad(option) {
			// 动态获取导航栏高度
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.statusBarHeight = res.statusBarHeight
			// 	}
			// })
			this.option = option;
			if (option.phone) {
				this.form.phone = option.phone
			}
			if (option.gender) {
				this.form.gender = option.gender
			}
		},
		methods: {
			//动态获取导航栏高度
			getNavHeight(res){
				this.barHeight = res.navbarHeight + res.statusBarHeight
			},
			//登录或者注册
			loginUser() {
				if (!this.$u.test.mobile(this.form.phone)) {
					this.$u.toast('手机号码不正确')
					return false;
				}
				if (!this.$u.test.digits(this.form.phoneCode) || !this.$u.test.rangeLength(`${this.form.phoneCode }`, [6,
						6])) {
					this.$u.toast('验证码不合法')
					return false;
				}
				this.registerModelFlag = this.option.type === 'register';
				if (!this.registerModelFlag) {
					this.login()
				}
			},
			//获取用户信息后调用方法
			registerCallback(detail) {
				const obj = {
					...detail,
					...detail.userInfo,
					...this.form,
					gender: detail.userInfo.gender === 1 ? '男' : '女'
				}
				this.registerModelFlag = false;
				exhibitRegister(obj).then(res => {
					//弹出登录确认框
					this.loginModelFlag = true;
				}).catch(res => {
					this.getLoginCode()
				})
			},
			//登录
			login() {
				if (this.option.type == 'editPhone') {
					this.editPhone() //换绑手机
					return false;
				}
				this.loading = true;
				this.form.code = this.code;
				this.$store.dispatch("setLogin", this.form).then(res => {
					const {
						operationStep,
						userType,
						clerkRole,
						isSetUserType
					} = res;
					this.loading = false;
					if (!isSetUserType) {
						//未设置则需要先入驻
						this.$u.route({
							url: '/pagesA/firstLogin/firstLogin'
						})
						return false;
					}
					this.$u.route({
						type: 'reLaunch',
						url: '/pages/index/index'
					})
					this.$store.dispatch('setFailLogin', false)
				}).catch(e => {
					this.loading = false;
					if (e === '用户信息获取失败') this.$u.toast(e)
				})
			},
			//获取验证码
			getCodeVali() {
				if (!this.$u.test.mobile(this.form.phone)) {
					this.$u.toast('手机号码不正确')
					return false;
				}
				this.getCode({
					phone: this.form.phone,
					type: this.pageType
				})
			},
			async editPhone() {
				this.loading = true;
				try {
					await getDetail({
						...this.form,
						type: 3,
						code: this.form.phoneCode
					}, 'sms', 'third', 'validateSmsCode')
					await add({
						...this.form,
						uid: this.$store.getters.loginForm.uid
					}, 'thirdUser', 'systemApi', 'thirdUserSet').then(res => {
						this.loading = false;
						this.$u.toast('换绑成功，请重新登录');
						this.$store.dispatch("loginOut")
						this.clearTime()
						this.form.phoneCode = ''
						this.option = {
							type: 'login'
						}
					})
				} catch (e) {
					this.loading = false;
					//TODO handle the exception
				}
			},
			//返回
			customBack() {
				if (this.option.isError == 1) {
					this.$u.route({
						url: '/pagesB/register/register',
						type: 'reLaunch'
					})
					return false;
				}
				this.$u.route({
					type: "back"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page /deep/.u-input {
		background-color: transparentize($color: #000000, $amount: 1);
	}

	.sava-btn {
		bottom: 200rpx;
		left: 225rpx;
		right: 225rpx;
	}
	.welcome {
		// position: fixed;
		// left: 50rpx;
		width: 466rpx;
		height: 290rpx;
		margin: 100rpx 0 145rpx 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.field-box {
		padding:0 85rpx ;
	}

	.form-box {
		background-image: url('https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/c11f61b563e347beb20eed2317afb61e.png');
		background-size: (49 / 75)*100vw (49 / 75)*100vw * (65/49);
		background-repeat: no-repeat;
	}


	// 新白皮
	.login-rigister {
		position: fixed;
		bottom: 200rpx;
		left: 50vw;
		transform: translateX(-290rpx);
	}
</style>
